<!--
 * @Author: Haochen
 * @Date: 2021-12-08 20:58:52
 * @LastEditTime: 2021-12-13 15:18:37
 * @FilePath: \students-system\src\views\subjects\SubjectsList.vue
-->
<template>
  <div class="subjects-list">
    <bread-crumb />
    <h4>专业列表</h4>
    <br />
    <h5>搜索专业</h5>

    <div class="list-row">
      <el-input id="input-search" type="text" v-model.lazy="searchData.value" />
      <el-button type="info" @click="confirmSearch">确认搜索</el-button>
    </div>

    <el-table :data="subjects" border style="width: 100%">
      <el-table-column prop="name" label="专业名称" align="center">
      </el-table-column>

      <el-table-column label="专业操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row._id)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deleteSubject(scope.row._id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <Pages
      :total="total"
      :currentPage="pageData.currentPage"
      :pageSize="pageData.pageSize"
      @prevPage="prevPage"
      @nextPage="nextPage"
    />

    <!-- <select v-model="subjectsId">
      <option :value="undefined" disabled>请选择专业</option>
      <option
        v-for="subject in subjects"
        :key="subject._id"
        :value="subject._id"
      >
        {{ subject.name }}
      </option>
    </select>
    &nbsp;
    <button @click="deleteSubject()">确认删除</button> -->
  </div>
</template>

<script>
import bus from "@/views/students/bus.js";
import BreadCrumb from "../../components/common/BreadCrumb.vue";
import { createNamespacedHelpers } from "vuex";
import Pages from "../../components/common/Pages.vue";
const { mapActions: subjectsActions, mapState: subjectsState } =
  createNamespacedHelpers("subjects");

export default {
  components: {
    BreadCrumb,
    Pages,
  },
  data() {
    return {
      subjectsId: undefined,
      searchData: { value: "" },
      pageData: {
        currentPage: 1, //当前页码
        pageSize: 5, // 每页显示条数
      },
    };
  },
  computed: {
    ...subjectsState({
      subjects: "rows",
      total: "total",
      pages: "pages",
    }),
  },
  created() {
    this.getSubjects();

    bus.$on("handleSizeChange", (size) => {
      this.pageData.pageSize = size;
      this.getSubjects();
    });

    bus.$on("handleCurrentChange", (currentPage) => {
      this.pageData.currentPage = currentPage;
      this.getSubjects();
    });
  },
  methods: {
    ...subjectsActions(["getSubjectsAsync"]),
    getSubjects() {
      this.getSubjectsAsync({ ...this.searchData, ...this.pageData });
    },
    async deleteSubject(id) {
      const { data: res } = await this.$api.subjects.deleteSubject({
        _id: id,
      });

      if (res.code) {
        alert(res.message);
        this.getSubjects();
      } else {
        alert(res.message);
      }
    },
    confirmSearch() {
      this.getSubjects();
    },
    // * 上一页功能
    prevPage() {
      if (this.pageData.currentPage == 1) {
        return;
      }
      this.pageData.currentPage--;
    },
    // * 下一页功能
    nextPage() {
      if (this.pageData.currentPage == this.pages) {
        return;
      }
      this.pageData.currentPage++;
    },
  },
  watch: {
    pageData: {
      handler() {
        this.getSubjects();
      },
      deep: true,
    },
    "pageData.pageSize"() {
      this.pageData.currentPage = 1;
      this.getSubjects();
    },
  },
};
</script>

<style>
.subjects-list {
  width: 60%;
  padding: 20px;
}

.el-table {
  padding-bottom: 20px;
}
.list-row {
  width: 55%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}

#input-search {
  width: 200px;
}
</style>
